<template>
<div>
<template>


<!-- 添加任务隐藏端口 -->
<el-dialog title="发布任务" :visible.sync="dialogFormVisible">

  <el-form :model="taskDTO">

    <!-- 任务名称 -->
    <el-form-item label="任务名称" label-width="120px">
      <el-input v-model="taskDTO.task.taskName" autocomplete="off"></el-input>
    </el-form-item> 


    <!-- 任务类型 -->
    <el-form-item label="任务类型" label-width="120px">

    <!-- 类型选择 -->
            <el-select
          v-model="taskDTO.task.type"
          placeholder="请选择任务类型"
          style="width: 240px"
        >
          <el-option
            v-for="item in taskType"
            :key="item.id"
            :label="item.name"
            :value="item.name"
          />
        </el-select>
    </el-form-item>

    <!-- 创建时间 -->
    <el-form-item label="创建时间" label-width="120px">
      <el-date-picker
      v-model="taskDTO.task.createTime"
      type="datetime"
      placeholder="选择日期时间">
    </el-date-picker>

    <!-- 截止时间 -->
    </el-form-item>
    <el-form-item label="截止时间" label-width="120px">
      <el-date-picker
      v-model="taskDTO.task.endTime"
      type="datetime"
      placeholder="选择日期时间">
    </el-date-picker>
    </el-form-item>

    <!-- 评估问卷类型 -->
    <el-form-item label="评估问卷类型" label-width="120px" v-if="taskDTO.task.type === '评估，评价问卷'">
            <el-select
          v-model="taskDTO.evaluate.type"
          placeholder="请选择评估问卷类型"
          style="width: 240px"
        >
          <el-option
            v-for="item in evaluateType"
            :key="item.id"
            :label="item.name"
            :value="item.name"
          />
        </el-select>
    </el-form-item>
    <!-- 调查问卷类型 -->
    <el-form-item label="评估问卷类型" label-width="120px" v-if="taskDTO.task.type === '调查问卷'">
            <el-select
          v-model="taskDTO.investigation.type"
          placeholder="请选择评估问卷类型"
          style="width: 240px"
        >
          <el-option
            v-for="item in investigationType"
            :key="item.id"
            :label="item.name"
            :value="item.name"
          />
        </el-select>
    </el-form-item>
    <!-- 评估问卷选择老师 -->
    <el-form-item label="选择老师" label-width="120px" 
    v-if="
       taskDTO.evaluate.type === '教师对学生的评价'
       || taskDTO.evaluate.type === '教师自评'
       || taskDTO.evaluate.type === '教学评价'
    "
    >
            <el-select
          v-model="taskDTO.teacherId"
          placeholder="选择老师"
          style="width: 240px"
        >
          <el-option
            v-for="item in teachers"
            :key="item.id"
            :label="item.username"
            :value="item.id"
          />
        </el-select>
    </el-form-item>
    <!-- 调查问卷选择老师 -->
    <el-form-item label="选择老师" label-width="120px" 
    v-if="
       taskDTO.investigation.type === '给老师，问题反馈'
    "
    >
            <el-select
          v-model="taskDTO.teacherId"
          placeholder="选择老师"
          style="width: 240px"
        >
          <el-option
            v-for="item in teachers"
            :key="item.id"
            :label="item.username"
            :value="item.id"
          />
        </el-select>
    </el-form-item>
    <!-- 调查问卷选择班级 -->
    <el-form-item label="选择班级" label-width="120px" 
       v-if="
    taskDTO.investigation.type === '给学生，调查'
    "
    >
          <el-select
          v-model="taskDTO.classId"
          placeholder="选择班级"
          style="width: 240px"
        >
          <el-option
            v-for="item in classess"
            :key="item.id"
            :label="item.className"
            :value="item.id"
          />
        </el-select>
    </el-form-item>
    <!-- 评估问卷选择班级 -->
    <el-form-item label="选择班级" label-width="120px" 
       v-if="
    taskDTO.evaluate.type === '教师对学生的评价'
     || taskDTO.evaluate.type === '教学评价'
     || taskDTO.evaluate.type === '课程评价'
    "
    >
                <el-select
          v-model="taskDTO.classId"
          placeholder="选择班级"
          style="width: 240px"
        >
          <el-option
            v-for="item in classess"
            :key="item.id"
            :label="item.className"
            :value="item.id"
          />
        </el-select>
    </el-form-item>
    
    <!-- 评估问卷选择课程 -->
    <el-form-item label="选择课程" label-width="120px" 
       v-if="
    taskDTO.evaluate.type === '课程评价'
    "
    >
                <el-select
          v-model="taskDTO.evaluate.type"
          placeholder="选择课程"
          style="width: 240px"
        >
          <el-option
            v-for="item in evaluateType"
            :key="item.id"
            :label="item.courseName"
            :value="item.id"
          />
        </el-select>
    </el-form-item>

    <!-- 评估问卷内容 -->
    <el-form-item label="问卷预览：" label-width="120px" 
    v-if="taskDTO.task.type === '评估，评价问卷' && taskDTO.evaluate.type === '教师对学生的评价'"
    />
    <el-form-item label="学生是否积极响应老师问题" label-width="200px"
        v-if="taskDTO.task.type === '评估，评价问卷' && taskDTO.evaluate.type === '教师对学生的评价'"
    >
      <el-input v-model="taskDTO.evaluate.content" autocomplete="off" disabled></el-input>
    </el-form-item>
    <el-form-item label="学生有无迟到现象" label-width="200px"
        v-if="taskDTO.task.type === '评估，评价问卷' && taskDTO.evaluate.type === '教师对学生的评价'"
    >
      <el-input v-model="taskDTO.evaluate.content" autocomplete="off" disabled></el-input>
    </el-form-item>
    <el-form-item label="学生有无早退现象" label-width="200px"
        v-if="taskDTO.task.type === '评估，评价问卷' && taskDTO.evaluate.type === '教师对学生的评价'"
    >
      <el-input v-model="taskDTO.evaluate.content" autocomplete="off" disabled></el-input>
    </el-form-item>
    <el-form-item label="学生是否能够按时完成课余任务" label-width="200px"
        v-if="taskDTO.task.type === '评估，评价问卷' && taskDTO.evaluate.type === '教师对学生的评价'"
    >
      <el-input v-model="taskDTO.evaluate.content" autocomplete="off" disabled></el-input>
    </el-form-item>
   
   
   
    <!-- 评估问卷内容 -->
    <el-form-item label="问卷预览：" label-width="120px" 
    v-if="taskDTO.task.type === '评估，评价问卷' && taskDTO.evaluate.type === '教师自评'"
    />
    <el-form-item label="您认为学生学习状态如何" label-width="200px"
        v-if="taskDTO.task.type === '评估，评价问卷' && taskDTO.evaluate.type === '教师自评'"
    >
      <el-input v-model="taskDTO.evaluate.content" autocomplete="off" disabled></el-input>
    </el-form-item>
    <el-form-item label="您认为学生学习效果如何" label-width="200px"
        v-if="taskDTO.task.type === '评估，评价问卷' && taskDTO.evaluate.type === '教师自评'"
    >
      <el-input v-model="taskDTO.evaluate.content" autocomplete="off" disabled></el-input>
    </el-form-item>
    <el-form-item label="您认为您教学质量如何" label-width="200px"
        v-if="taskDTO.task.type === '评估，评价问卷' && taskDTO.evaluate.type === '教师自评'"
    >
      <el-input v-model="taskDTO.evaluate.content" autocomplete="off" disabled></el-input>
    </el-form-item>







    <!-- 评估问卷内容 -->
    <el-form-item label="问卷预览：" label-width="120px" 
    v-if="taskDTO.task.type === '评估，评价问卷' && taskDTO.evaluate.type === '课程评价'"
    />
    <el-form-item label="您认为此课程开启意义如何" label-width="200px"
        v-if="taskDTO.task.type === '评估，评价问卷' && taskDTO.evaluate.type === '课程评价'"
    >
      <el-input v-model="taskDTO.evaluate.content" autocomplete="off" disabled></el-input>
    </el-form-item>
    <el-form-item label="您认为此课程教师讲解是否生动" label-width="200px"
        v-if="taskDTO.task.type === '评估，评价问卷' && taskDTO.evaluate.type === '课程评价'"
    >
      <el-input v-model="taskDTO.evaluate.content" autocomplete="off" disabled></el-input>
    </el-form-item>
    <el-form-item label="您认为此课程是否对自己有帮助" label-width="200px"
        v-if="taskDTO.task.type === '评估，评价问卷' && taskDTO.evaluate.type === '课程评价'"
    >
      <el-input v-model="taskDTO.evaluate.content" autocomplete="off" disabled></el-input>
    </el-form-item>




    <!-- 评估问卷内容 -->
    <el-form-item label="问卷预览：" label-width="120px" 
    v-if="taskDTO.task.type === '评估，评价问卷' && taskDTO.evaluate.type === '教学评价'"
    />
    <el-form-item label="您认为学生学习状态如何" label-width="200px"
        v-if="taskDTO.task.type === '老师教学情况是否符合自己的需要' && taskDTO.evaluate.type === '教学评价'"
    >
      <el-input v-model="taskDTO.evaluate.content" autocomplete="off" disabled></el-input>
    </el-form-item>
    <el-form-item label="您认为学生学习效果如何" label-width="200px"
        v-if="taskDTO.task.type === '老师是否有早退现象' && taskDTO.evaluate.type === '教学评价'"
    >
      <el-input v-model="taskDTO.evaluate.content" autocomplete="off" disabled></el-input>
    </el-form-item>
    <el-form-item label="您认为您教学质量如何" label-width="200px"
        v-if="taskDTO.task.type === '老师是否有拖堂，教学事故' && taskDTO.evaluate.type === '教学评价'"
    >
      <el-input v-model="taskDTO.evaluate.content" autocomplete="off" disabled></el-input>
    </el-form-item>



    <!-- 评估问卷内容 -->
    <el-form-item label="问卷预览：" label-width="120px" 
    v-if="taskDTO.task.type === '评估，评价问卷' && taskDTO.evaluate.type === '听课评估'"
    />
    <el-form-item label="老师授课时，学生的整体状态如何" label-width="200px"
        v-if="taskDTO.task.type === '评估，评价问卷' && taskDTO.evaluate.type === '听课评估'"
    >
      <el-input v-model="taskDTO.evaluate.content" autocomplete="off" disabled></el-input>
    </el-form-item>
    <el-form-item label="是否有学生上课违规" label-width="200px"
        v-if="taskDTO.task.type === '评估，评价问卷' && taskDTO.evaluate.type === '听课评估'"
    >
      <el-input v-model="taskDTO.evaluate.content" autocomplete="off" disabled></el-input>
    </el-form-item>
    <el-form-item label="老师是否对知识存在偏差" label-width="200px"
        v-if="taskDTO.task.type === '评估，评价问卷' && taskDTO.evaluate.type === '听课评估'"
    >
      <el-input v-model="taskDTO.evaluate.content" autocomplete="off" disabled></el-input>
    </el-form-item>


    <!-- 调查问卷内容 -->
    <el-form-item label="问卷预览：" label-width="120px" v-if="taskDTO.task.type === '调查问卷' && taskDTO.investigation.type === '给学生，调查' "/>
     <el-form-item label="调查标题" label-width="200px"
        v-if="taskDTO.task.type === '调查问卷' && taskDTO.investigation.type === '给学生，调查'"
    >
      <el-input v-model="taskDTO.investigation.content" autocomplete="off" disabled></el-input>
     </el-form-item>
    <el-form-item label="调查内容" label-width="200px"
        v-if="taskDTO.task.type === '调查问卷' && taskDTO.investigation.type === '给学生，调查'"
    >
      <el-input v-model="taskDTO.investigation.content" autocomplete="off" disabled></el-input>
    </el-form-item>


        <!-- 调查问卷内容 -->
    <el-form-item label="问卷预览：" label-width="120px" v-if="taskDTO.task.type === '调查问卷' && taskDTO.investigation.type === '给老师，问题反馈' "/>
     <el-form-item label="你想反馈的标题" label-width="200px"
        v-if="taskDTO.task.type === '调查问卷' && taskDTO.investigation.type === '给老师，问题反馈'"
    >
      <el-input v-model="taskDTO.investigation.content" autocomplete="off" disabled></el-input>
     </el-form-item>
    <el-form-item label="你想反馈的内容" label-width="200px"
        v-if="taskDTO.task.type === '调查问卷' && taskDTO.investigation.type === '给老师，问题反馈'"
    >
      <el-input v-model="taskDTO.investigation.content" autocomplete="off" disabled></el-input>
    </el-form-item>



    <!-- 添加取消按钮 -->
    <el-form-item label-width="200px">
      <el-button size="small"  type="primary" @click="ensureAddtask()">添加</el-button>
      <el-button size="small"  type="primary" @click="cancelAddtask()">取消</el-button>
    </el-form-item>
  </el-form>
  </el-dialog>

  <!-- 页面主体 -->
   <el-row :gutter="0">

     <!-- 添加任务按钮 -->
    <el-col :span="3">
      <el-button size="small"  type="primary" @click="addtask()">发布任务 </el-button>
    </el-col>

    <!-- 输入框 -->
    <el-col :span="6">
        <el-input
        v-model="taskName"
        class="w-50 m-2"
        size="small"
        placeholder="请输入任务名"
        @input="search()"
        />
    </el-col>

    <!-- 搜索按钮 -->
  <el-col :span="3">
      <el-button size="small"  type="primary" @click="search()">搜索</el-button>
    </el-col>
  </el-row>

  <!-- 表格 -->
  <el-table :data="tasks" stripe border height="500">
    <el-table-column prop="id" sortable=true label="ID" width="65"/>
    <el-table-column prop="taskName" sortable=true label="任务名称"  width="85"/>
    <el-table-column prop="type" sortable=true label="任务类型"  width="85"/>
    <el-table-column prop="createTime" sortable=true label="开始时间" width="85"/>
    <el-table-column prop="endTime" sortable=true label="截止时间" width="65"/>
        <el-table-column label="操作">
            <template #default="scope">
                <el-button size="small" @click="updatetask(scope.row)">
                   详情
                </el-button>
                <el-button size="small" type="danger" @click="deletetask(scope.row.id)">
                   删除
                </el-button>
            </template>
            </el-table-column>
  </el-table>

  <!-- 分页部分 -->
  <el-pagination
    small
    background
    layout="prev, pager, next"
    :page-size="taskDTO.capacity"
    :current-page.sync="taskDTO.index"
    @current-change="changeCurrent"
    :total="count"
    class="mt-4"
  />
</template>

</div>
</template>
<script>
export default {
  name: 'Home',
  data () {
    return {
      //任务类型
      taskType: [
          {id: 1, name: '评估，评价问卷'},
          {id: 2, name: '调查问卷'}   
      ],
      // 评估，评价问卷类型
      evaluateType: [
          {
              id: 1,
              name: '教师对学生的评价'
          },
          {
              id: 2,
              name: '教师自评'
          },
          {
              id: 3,
              name: '课程评价'
          },
          {
              id: 4,
              name: '教学评价'
          },
          {
              id: 5,
              name: '听课评估'
          }
      ],
      // 调查问卷类型
      investigationType: [
          {
              id: 1,
              name: '给学生，调查'
          },
          {
              id: 2,
              name: '给老师，问题反馈'
          }
      ],
      taskDTO: {
          task: {
              taskName: '',
              type: '',
              createTime: '',
              endTime: '',
              
          },
          evaluate: {
              taskName: '',
              type: '',
              content: ''
          },
          investigation: {},
          option: ''
      },
      // 当前登录的用户角色
      role: '任务',
      // 表格映射对象
      tasks: [],
      // 修改的对象
      utask: {},
      // 添加任务弹出控制
      dialogFormVisible: false,
      // 修改任务弹出控制
      updateDialogFormVisible: false,
      // 添加任务实体
      task: {},
      // 任务列表总数
      count: 0,
      // 每个任务的学生列表
      students: [],
      // 每个任务的小组名称
      groups: [],
      teachers: [],
      courses: [],
      students: [],
      classess: [],
      taskName: ''
    }
  },
  // 页面初始化函数 
  created () {
    this.$http({
        url: "/classes",
        params: {
            classesName: ''
        }
    }).then(response => {
       this.classess = response.data
    })
    this.$http({
        url: "/student",
        params: {
            username: ''
        }
    }).then(response => {
       this.students = response.data
    })
    this.$http({
        url: "/course",
        params: {
            courseName: ''
        }
    }).then(response => {
       this.courses = response.data
    })
    this.$http({
        url: "/teacher",
        params: {
            username: ''
        }
    }).then(response => {
       this.teachers = response.data
    })
    this.$http({
        url: "/task",
        params: {
            taskName: this.taskName
        }
    }).then(response => {
       this.tasks = response.data
    })
  },
  methods: {
    // 改变当前页
    changeCurrent() {
      this.findAll()
    },
    // 添加任务
     addtask() {
       this.dialogFormVisible=true;
     },
     updatetask(data) {
       window.sessionStorage.setItem('task_id', data.id)
       this.$router.push('/home/details/manager')
     },
     deletetask(id) {
        this.$http.delete('/task/' + id).then(response => {
          this.$message({
          message: '比赛已改为结束状态',
          type: 'success'
          });
          this.findAll()
        })
     },
     ensureAddtask() {
      console.log(this.taskDTO)
      this.$http.post("/task/admin", this.taskDTO).then(response => {
        this.$message({
          message: '添加任务成功',
          type: 'success'
        });
        this.cleartask()
        this.findAll()
      })
    },
    // 取消添加任务
    cancelAddtask() {
      this.cleartask()
    },
    ensureUpdatetask() {
      this.$http.put('/task', this.utask).then(response => {
        this.$message({
          message: '修改任务成功',
          type: 'success'
        });   
        this.updateDialogFormVisible=false
        this.findAll()
      })
    },
    cancelUpdatetask() {
      this.updateDialogFormVisible=false
    },
    // 搜索对象，并映射
    search() {
      this.findAll()
    },
    // 获得该任务的小组信息
    showGroup(id) {
      this.$http.get('/group/task/' + id).then(response => {
        this.groups = response.data
      })
    },
    // 获得该任务的学生信息
    showStudent(id) {
      this.$http.get('/student/task/' + id).then(response => {
        this.students = response.data
      })
    },
    // 查询所有，并映射
    findAll() {
      this.$http({
          url: "/task",
          params: {
              taskName: this.taskName
          }
      }).then(response => {
        this.tasks = response.data
      })
    },
    // 清除任务，并关闭窗口
    cleartask() {
        this.task.taskName=''
        this.task.password=''
        this.task.roleId=''
        this.task.taskNo=''
        this.dialogFormVisible=false
     },
    exportStudentExcel (taskName) {
        /* generate workbook object from table */
        var xlsxParam = { raw: true } // 导出的内容只做解析，不进行格式转换
        var wb = this.$xlsx.utils.table_to_book(document.querySelector('#exportStudent'), xlsxParam)
        /* get binary string as output */
        var wbout = this.$xlsx.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
        try {
            this.$filesaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), taskName + '学生名单.xlsx')
        } catch (e) {
        if (typeof console !== 'undefined') {
            console.log(e, wbout)
        }
        }
        return wbout
    },
    exportGroupExcel (taskName) {
        /* generate workbook object from table */
        var xlsxParam = { raw: true } // 导出的内容只做解析，不进行格式转换
        var wb = this.$xlsx.utils.table_to_book(document.querySelector('#exportGroup'), xlsxParam)
        /* get binary string as output */
        var wbout = this.$xlsx.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
        try {
            this.$filesaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), taskName + '小组名单.xlsx')
        } catch (e) {
        if (typeof console !== 'undefined') {
            console.log(e, wbout)
        }
        }
        return wbout
    }
  }
}
</script>
<style>

</style>